import React, { useState, useEffect, useRef } from 'react';
import { EdrmsTypePieStyle } from './style';
import * as echarts from 'echarts';
import { EdrmsTypeDto } from '@/services/types';
import { triggerAsyncId } from 'async_hooks';


type EdrmsTypePiePropsType = {
    data: EdrmsTypeDto
};

const BorrowCount: React.FC<EdrmsTypePiePropsType> = (props) => {
    const { data } = props;

    const chartRef = useRef(null);

    // let option = {
    //     title:
    //     { // 第一个圆环标题
    //         text: data?.total || 0, // 主标题
    //         textStyle: { // 主标题样式
    //             color: '#fff',
    //             fontWeight: 'bold',
    //             fontSize: 14
    //         },
    //         left: '50%', // 定位到适合的位置
    //         top: '40%', // 定位到适合的位置
    //         subtext: '馆藏总数', // 副标题
    //         subtextStyle: { // 副标题样式
    //             color: '#fff',
    //             fontSize: 13,
    //             fontWeight: 'bold'
    //         },
    //         textAlign: 'center' // 主、副标题水平居中显示
    //     },
    //     color: ['#23649e'],
    //     grid: {
    //         left: 0,
    //         // right: 0,
    //         bottom: 0,
    //         top: 0,
    //         containLabel: true
    //     },
    //     series: [
    //         // 主要展示层的
    //         {
    //             radius: ['30%', '70%'],
    //             center: ['50%', '50%'],
    //             type: 'pie',
    //             roseType: 'area',
    //             label: {
    //                 normal: {
    //                     show: false,
    //                     formatter: "{c}",
    //                     textStyle: {
    //                         fontSize: 13,
    //                     },
    //                     position: 'outside'
    //                 },
    //                 emphasis: {
    //                     show: true
    //                 }
    //             },
    //             labelLine: {
    //                 normal: {
    //                     show: true,
    //                     length: 20,
    //                     length2: 35
    //                 },
    //                 emphasis: {
    //                     show: true
    //                 }
    //             },
    //             name: "民警训练总量",
    //             data: (data?.edrmsTypeData || []).map((item: any) => {
    //                 item.value = item.number;
    //                 return item
    //             })
    //             ,
    //         }
    //         , {
    //             name: '外边框',
    //             type: 'pie',
    //             clockWise: false, //顺时加载
    //             hoverAnimation: false, //鼠标移入变大
    //             center: ['50%', '50%'],
    //             radius: ['75%', '75.5%'],
    //             label: {
    //                 normal: {
    //                     show: false
    //                 }
    //             },
    //             data: [{
    //                 value: 1000,
    //                 name: '',
    //                 itemStyle: {
    //                     normal: {
    //                         borderWidth: 2,
    //                         borderColor: '#61bad3'
    //                     }
    //                 }
    //             }]
    //         },
    //     ]
    // }
    let legend = {
        type: 'scroll',
        textStyle: {
            color: '#fff',
        },
        scrollDataIndex: 0,
        orient: 'vertical',
        right: 10,
        // data: data,
        // itemGap: 20,
        top: 'middle',
        align: 'left',
        pageIconColor: 'rgba(255,255,255,1)', //激活的分页按钮颜色
        pageIconInactiveColor: 'rgba(255,255,255,0.5)', //没激活的分页按钮颜色
        pageTextStyle: {
            color: '#fff',
        },
        // icon: 'circle',
        formatter: (name: any) => {
            if (!name) return '';
            if (name.length > 10) {
                name = name.slice(0, 10) + '...';
            }
            return name;
        },
    };

    let option = {
        tooltip: {
            trigger: 'item',
            show: false,
        },
        // legend,
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['38%', '60%'],
                center: ['40%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                    formatter: '{c}\n\n{b}\n{d}%',
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 14,
                        fontWeight: 'bold',
                        color: '#fff',
                        shadowBlur: 100,
                        shadowOffsetX: 1,
                        shadowColor: 'rgba(f, f, f)'
                    },
                },
                labelLine: {
                    show: true,
                },
                data: (data?.edrmsTypeData || []).slice(0,5).map((item: any) => {
                    item.value = item.number;
                    return item
                }),
            },
        ],
    };
    useEffect(() => {
        let chart: any = null;
        if (chartRef.current) {
            // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
            chart = echarts.init(chartRef.current);
            // 设置图表实例的配置项和数据         
            option && chart.setOption(option);
        }

        // 组件卸载
        return () => {
            // myChart.dispose() 销毁实例。实例销毁后无法再被使用
            chart.dispose();
        };
    }, [props.data]);

    return (
        <EdrmsTypePieStyle>
            <div ref={chartRef} style={{ width: '12vw', height: '12vw' }}>
            </div>
        </EdrmsTypePieStyle>
    );
};

export default BorrowCount;
